define(
    [ "jquery", "application", "service", "wizard", "gegewu","workshop", "designPage" ],
    function($, app, serv, wizard, ggw, ws, Page) {
      return (function() {
        /**
         * @param settings
         *          配置.
         * @param target
         *          直接的html对象.
         */
        var clz = definePlugin("PgWorkShop", Page, function(settings, target) {
          try {
            this.initCanvas();
            this.compose();
            this.bindPageEvent();
          } catch (e) {
            console.log(e);
          }
        });

        // --- function bindPageEvent
        defineFunction.call(clz.prototype,"bindPageEvent", function() {
          var page = this;
          var $page = $(page);
          $page.on("whenCommit", page.onWhenCommit);
          $page.on("afterCommit", page.onAfterCommit);
        });
        // --- function bindPageEvent end

        // --- function onWhenCommit
        defineFunction.call(clz.prototype,"onWhenCommit", function() {
          var page = this;
          //page.ctrlLayer.addComp(new Component({}));
        });
        // --- function onWhenCommit end
        // --- function onAfterCommit
        defineFunction.call(clz.prototype,"onAfterCommit", function() {
          var page = this;
          //page.ctrlLayer.clear();
        });
        // --- function onAfterCommit end

        // --- function compose()

        defineFunction.call(clz.prototype,"compose", function() {
          var self = this;
          var page = self;
          var vw = app.getLogicViewWidth();
          var vh = app.getLogicViewHeight();
          self.background = new Background({
            color : "#ededed"
            //,image : "./img/bg.png"
          });

          self.toolkitPanel = new ws.ToolkitPanel({width:200,screenViewWidth:1080});
          self.toolkitPanel.addComp(new ggw.Header({}));
          self.toolkitPanel.addComp(new ggw.Footer({top:200}));
          
          var compCup = new ImageButton({
            image : "bigcup",
            left : vw - 360,
            top : 100,
            width : 360,
            height : 780,
            onClick : function() {
            }
          });
          var compHead = new ImageButton({
            image : "bighead",
            left : -200,
            top : 0,
            width : 1000,
            height : 800,
            onClick : function() {
            }
          });
          var compBoom = new ImageButton({
            image : "boom",
            left : vw - 750,
            top : 200,
            width : 500,
            height : 395,
            onClick : function() {
            }
          });
          
          var cupAndHead = new GroupComponent({
            comps : [ compHead, compCup, compBoom ]
          });
          
          self.toolkitPanel.addComp(cupAndHead);
          //console.log("l:"+((vw-200-500)/2))
          
          self.screen=new ws.Screen({
            //top:(vh-1334/750*1000)/2,
            left:(vw-200-300)/2,
            top:vh-(300*1334/750)-5,
            //left:0,
            width:300,
            screen:{
              background:"white",width:750,height:1334
            }
          });
          
          this.mainLayer.addComp(self.background);
          this.mainLayer.addComp(self.toolkitPanel);
          this.mainLayer.addComp(self.screen);
          
          //self.screen.mainLayer.addComp(new ggw.Header({}));
        });

        // --- function compose() end

        return $.fn.pgWorkShop;
      })();
    });